import React from 'react';
import { withRouter } from 'react-router-dom';

class Remarkbar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            color: props.color,
            confessionid:props.confessionid,
            remark:'',
            userid:localStorage.getItem('userid'),
            username:localStorage.getItem('username'),
            userimage:localStorage.getItem('userimage')
        };
    }

    inputchange(e) {
        this.setState({
          remarkcontent: e.target.value
        })
      }
    
      pushRemark() {
        if (this.state.remarkcontent == '') {
          alert('请输入内容！')
        } else {
          const date = new Date()
          const month = date.getMonth() + 1
          const time = date.getFullYear() + '-' + month + '-' + date.getDate() + '-' + date.getHours() + ':' + date.getMinutes()
          const param1 = {
            content: this.state.remarkcontent,
            time: time
          }
          this.state.confession.remarksnum++
          const param2 = {
            remarksnum:this.state.confession.remarksnum
          }
          
          fetch(`https://www.prebeauty.work/remark/${this.state.userid}&${this.state.confessionid}`, {
            method: 'POST',
            body: JSON.stringify(param1),
            headers: {
              'content-type': 'application/json'
            }
          }).then((res) => {
            if (res.status === 200) {
              res.json().then((data) => {
                console.log('评论！')
                this.forceUpdate()
              })
            } else {
              alert("出现一个问题");
            }
          })
    
          //confession表中的remarksnum+1
          fetch(`https://www.prebeauty.work/confession/${this.state.confessionid}`,{
            method:'PUT',
            body:JSON.stringify(param2),
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then((data)=> {
                    console.log('confession remarksnum 评论！')
                })
            }else {
                alert("出现一个问题");
            }
        })
        }
      }

    render() {
        return (
            <div
                style={{
                    backgroundColor: '#ffffff',
                    height: 35,
                    width: '100%',
                    boxShadow: '0 -1 -1 #B5B5B5',
                    position: 'absolute',
                    bottom:0
                }}
            >
                <div className="iconfont icon-liaotian"
                    style={{
                        color: this.state.color,
                        width:'8%',
                        marginTop:7,
                        fontSize:21,
                        float:'left'
                    }}
                ></div>
                <input 
                    style={{
                        height: 25,
                        width: '70%',
                        border: `${this.state.color} solid 1px`,
                        borderRadius: 10,
                        marginTop: 4,
                        marginLeft: '3%',
                        marginRight: '3%',
                        float: 'left'
                    }}
                    type="text" 
                    onChange={this.inputchange.bind(this)}
                ></input>
                <input 
                    style={{
                        width: '15%',
                        height: 25,
                        marginTop:5,
                        backgroundColor: this.state.color,
                        borderRadius: 10,
                        border: 'none',
                        float: 'left'
                    }}
                    type="button" 
                    value="发送" 
                    onClick={this.pushRemark.bind(this)}
                ></input>
            </div>
        );
    }
}

export default withRouter(Remarkbar);